<template>
  <div>
    <div class="news">
      <!-- 已登录 -->
      <div class="login-news" v-if="isLogin == true">
        <!-- 顶部 -->
        <div class="news-header">
          <div class="header-left">
            <i
              class="iconfont icon-xiangzuojiantou"
              @click="$router.go('-1')"
            ></i>
          </div>
          <div class="header-title">
            <span>消息中心</span>
          </div>
          <div class="header-right">
            <span>全部消息</span>
          </div>
        </div>
        <!-- 内容 -->
        <div class="news-content">
          <div class="content-left">
            <div class="left-top">
              <i class="iconfont icon-pinglun"></i>
            </div>
            <span>评论和@</span>
          </div>
          <div class="content-center">
            <div class="center-top">
              <i class="iconfont icon-shoucang"></i>
            </div>
            <span>收藏和赞</span>
          </div>
          <div class="content-right">
            <div class="right-top">
              <i class="iconfont icon-fensi"></i>
            </div>
            <span>新的粉丝</span>
          </div>
        </div>
        <!-- 热门活动 -->
        <div class="news-popularActivities">
          <div class="popularActivities-top">
            <span class="top-left">热门活动</span>
            <span class="top-right">全部活动</span>
          </div>
          <div class="popularActivities-bottom">
            <div class="left-img">
              <img
                src="https://i1.douguo.com//upload/banner/0/1/2/01c139ac62ca1527d4bfb2caa2947312.jpg"
                alt=""
              />
            </div>
            <div class="right-img">
              <img
                src="https://i1.douguo.com//upload/note/8/4/6/84c2a2aeecbc9023fc06139c26553c36.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="popularActivities-bottom">
            <div class="left-img">
              <img
                src="https://i1.douguo.com//upload/note/2/7/9/27f394fc02a32c049d1169890d8becc9.jpg"
                alt=""
              />
            </div>
            <div class="right-img">
              <img
                src="https://i1.douguo.com//upload/note/a/b/a/ab9147ea223e094a96d2b4c73311b0fa.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- 私信消息 -->
        <div class="news-privateMessage">
          <div class="privateMessage-top">
            <span>私信消息</span>
          </div>
          <div class="privateMessage-bottom">
            <div class="bottom-left">
              <i class="iconfont icon-xiaoxi"></i>
            </div>
            <div class="bottom-right">
              <div class="right-top">
                <span class="topl">官方通知</span>
                <span class="topr">2021-12-26</span>
              </div>
              <div class="right-bottom">
                <span>Hi,终于等到热爱美食的你啦! 豆果...</span>
              </div>
            </div>
          </div>
        </div>
        <!-- end -->
        <div class="news-end">
          <span>-- End --</span>
        </div>
      </div>

      <!-- 未登录 -->
      <div class="notLogin" v-if="isLogin == false">
        <!-- 顶部 -->
        <div class="notLogin-header">
          <div class="header-left">
            <i
              class="iconfont icon-xiangzuojiantou"
              @click="$router.go('-1')"
            ></i>
          </div>
          <div class="header-right">
            <svg>
              <use xlink:href="#icon-qiatongxingxiang"></use>
            </svg>
          </div>
        </div>
        <div class="notLogin-titke">
          <h1>新东方美食</h1>
          <h1>会做饭很酷哦~</h1>
        </div>
        <div class="notLogin-form">
          <button class="phone" @click="login()">账号密码登录</button>
          <button class="honor">华为登录</button>
        </div>
        <div class="notLogin-other">
          <div class="other-top">
            <span>其他方式登录</span>
          </div>
          <div class="other-content">
            <svg>
              <use xlink:href="#icon-weixin1"></use>
            </svg>
            <svg>
              <use xlink:href="#icon-QQ"></use>
            </svg>
            <svg>
              <use xlink:href="#icon-weibo"></use>
            </svg>
            <svg>
              <use xlink:href="#icon-shouji1"></use>
            </svg>
          </div>
        </div>
        <div class="notLogin-bottom">
          <div class="agreement">
            <input type="checkbox" :checked="checked" @click="check" />
            <span
              >登录注册即表示同意<a>《用户协议》</a>和<a>《隐私政策》</a></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      isLogin: false,
      token: "",
      checked: false,
    };
  },
  methods: {
    login() {
      if (this.checked == true) {
        this.$router.push("/login");
      } else {
        Toast("勾选确认用户协议和隐私政策");
      }
    },
    check() {
      this.checked = true;
    },
  },
  created() {
    this.token = JSON.parse(localStorage.getItem("token") || "[]");
    // console.log(this.token);
    //判断没有值
    if (this.token != "") {
      this.isLogin = true;
    }
  },
};
</script>

<style lang="less">
.news {
  .login-news {
    .news-header {
      width: 100%;
      height: 30px;
      line-height: 30px;
      margin: 10px 10px 15px 15px;
      display: flex;
      .header-left {
        i {
          font-size: 18px;
          font-weight: bold;
          margin: 5px 50px 12px 5px;
        }
      }
      .header-title {
        span {
          font-size: 18px;
          font-weight: bold;
          margin: 5px 40px;
        }
      }
      .header-right {
        span {
          font-size: 12px;
          font-weight: bold;
          color: #454545;
          border: 1px solid #ededed;
          border-radius: 15px;
          margin: 5px 5px 5px 45px;
          padding: 5px 10px;
        }
      }
    }
    .news-content {
      width: 100%;
      margin: 0px 10px 15px 15px;
      display: flex;
      .content-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        .left-top {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          background-color: #face31;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            font-size: 24px;
          }
        }
        span {
          font-size: 15px;
          font-weight: bold;
          margin: 10px 25px;
        }
      }
      .content-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        .center-top {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          background-color: #face31;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            font-size: 24px;
          }
        }
        span {
          font-size: 15px;
          font-weight: bold;
          margin: 10px 25px;
        }
      }
      .content-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        .right-top {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          background-color: #face31;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            font-size: 24px;
          }
        }
        span {
          font-size: 15px;
          font-weight: bold;
          margin: 10px 25px;
        }
      }
    }
    .news-popularActivities {
      .popularActivities-top {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #f8f8f8;
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
        align-items: center;
        .top-left {
          font-size: 16px;
          font-weight: bold;
          margin-left: 15px;
        }
        .top-right {
          font-size: 13px;
          font-weight: bold;
          color: #a1a1a1;
          margin-right: 10px;
        }
      }
      .popularActivities-bottom {
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        .left-img {
          width: 170px;
          height: 95px;
          border-radius: 10px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
        .right-img {
          width: 170px;
          height: 95px;
          border-radius: 10px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
      }
    }
    .news-privateMessage {
      .privateMessage-top {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #f8f8f8;
        margin-top: 30px;
        span {
          font-size: 16px;
          font-weight: bold;
          margin-left: 15px;
        }
      }
      .privateMessage-bottom {
        margin: 20px 10px 0px 15px;
        display: flex;
        align-items: center;
        .bottom-left {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          background-color: #f9cc28;
          margin-left: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            font-size: 22px;
          }
        }
        .bottom-right {
          width: 73%;
          margin-left: 20px;
          .right-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .topl {
              font-size: 16px;
              font-weight: bold;
            }
            .topr {
              font-size: 10px;
              color: #727272;
            }
          }
          .right-bottom {
            span {
              font-size: 12px;
              color: #8b8b8b;
            }
          }
        }
      }
    }
    .news-end {
      margin: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 14px;
        color: #e5e5e5;
      }
    }
  }
  .notLogin {
    width: 100%;
    height: 667px;
    // background-image: url("https://img1.baidu.com/it/u=3635277030,1190318822&fm=26&fmt=auto");
    .notLogin-header {
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      .header-left {
        margin: 10px 0px 10px 15px;
        i {
          font-size: 18px;
          font-weight: bold;
        }
      }
      .header-right {
        margin: 10px 15px 10px 0px;
        svg {
          width: 24px;
          height: 24px;
        }
      }
    }
    .notLogin-titke {
      text-align: center;
      margin: 0px 15px 0px 25px;
      padding-top: 50px;
      h1 {
        margin: 10px 5px;
      }
    }
    .notLogin-form {
      margin: 100px 0px 70px;
      .phone {
        width: 310px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 25px;
        border: 1px solid #ffc535;
        background-color: #ffc535;
        margin: 10px 30px;
      }
      .honor {
        width: 310px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 25px;
        border: 1px solid #f7f5f8;
        background-color: #f7f5f8;
        margin: 10px 30px;
      }
    }
    .notLogin-other {
      .other-top {
        margin: 0px 15px 0px 25px;
        span {
          font-size: 13px;
          font-weight: bold;
          color: #333;
          // color: #909090;
        }
      }
      .other-content {
        margin: 20px 15px 15px 25px;
        svg {
          width: 30px;
          height: 30px;
          margin: 0px 15px 0px 10px;
        }
      }
    }
    .notLogin-bottom {
      .agreement {
        margin: 30px 15px 0px 25px;
        display: flex;
        align-items: center;
        input {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin: 0 5px;
        }
        span {
          font-size: 12px;
          color: #333;
          a {
            font-weight: bold;
            border-bottom: 1px solid #333;
          }
        }
      }
    }
  }
}
</style>